<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>姓名案例_插值语法_空气案例监视属性_深度监听</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="root">
        姓：<input type="text" v-model="firstname"/><br/>
        名：<input type="text" v-model="lastname"/><br/><br/>
        全名：<span>{{fullName}}</span><br/><br/>
        <span>今天天气很{{info}}</span><br/>
        <button @click="changeweather">切换</button>
        <hr>
        <h3>a的值是:{{numbers.a}}</h3>
        <button @click="numbers.a++">点我使a的值++</button>
    </div>
</body>
    <script type="text/javascript">
        Vue.config.productionTip = false
        const vm =new Vue({
            el:'#root',
            data:{
                firstname:'张',
                lastname:'三',
                isHot:true,
                numbers:{
                    a:1,
                    b:1
                }
            },
            methods:{
                //方法调用返回值
                pinjie(){
                    return (this.firstname).slice(0,3)+'-'+this.lastname
                },
                changeweather(){
                    return this.isHot= !this.isHot
                }
            },
            computed:{  
                //计算方法，原理是通过Object.definedproperty,相比用methods的好处是调用一次之后使用缓存，节约资源
                //完整写法
                // fullName:{
                //     get(){
                //         return (this.firstname).slice(0,3) + '-' + this.lastname
                //     },
                //     set(value){
                //         arr =value.split('-')
                //         this.firstname=arr[0]
                //         this.lastname=arr[1]
                //     }
                // }
                //简写
                fullName(){
                    return (this.firstname).slice(0,3) + '-' + this.lastname
                },
                info(){
                    return this.isHot?'炎热':'寒冷'
                }
            },watch:{
                //正常写法
                // isHot:{
                //     //初始化让handker调用一下
                //     immediate:true,
                //     handler(oldValue,newValue){
                //         console.log("isHot被修改",oldValue,newValue)
                //     }
                // },
                // numbers:{
                //     //深度监听
                //     //监视多级结构中所有值得变化
                //     deep:true,
                //     handler(oldValue,newValue){
                //         console.log("numbers被修改")
                //     }
                // }
                //简写 只有handler可简写
                // isHot(oldValue,newValue){
                //     console.log("isHot被修改",oldValue,newValue)
                // }
            }
        })


        //基于vm的正常写法
        // vm.$watch('isHot',{//监听
        //     immediate : true,
        //     deep:true,
        //     handler(newValue,oldValue){ //回调函数
        //         console.log("isHot被修改了",oldValue,newValue)
        //     }
        // })
        //缩写
        vm.$watch('isHot',function(oldValue,newValue){
            console.log("isHot被修改了",oldValue,newValue)
        })
    </script>
</html>